@import '../variables.less';
#app{
    .main {
        margin-top: 20*@base_size;
        min-height: 600*@base_size;
        //个人信息
        .nine_type {            
            position: fixed;
            top: 120*@base_size;
            width: 150*@base_size;
            background-color: @base_color;
            color: #333333;
            font-size: 16*@base_size;
            text-align: center;
            padding: 16*@base_size 0;
            border-radius: 10px;
            >li{
                padding: 16*@base_size 0;
            }
            >li.active{
                color: white;
            }
        }
        //右侧内容区域
        @right_width:1045;
        .right{            
            margin-left: 180*@base_size;
            .one_type {
                background-color: white;
                margin-top:100*@base_size;
                min-height: 600px;
                //tab页统一样式
                .my_tabs {
                    position: fixed;
                    top: 100*@base_size;
                    z-index: 19;
                    background-color: white;
                    width: @right_width*@base_size;
                    padding: 20*@base_size 15*@base_size 20*@base_size 15*@base_size;
                    li {
                        width: 124*@base_size;
                        letter-spacing: 2px;
                        height: 50*@base_size;                        
                        line-height: 50*@base_size;                        
                        font-size: 18*@base_size;
                        float: left;
                        border: 1px solid @color_line;
                        border-left: none;
                    }
                    li:first-child {
                        border-radius: 12px 0 0 12px;
                        border-left: 1px solid @color_line;
                    }
                    li:nth-of-type(2) {
                        border-radius: 0 12px 12px 0;
                    }
                    li.active {
                        background-color: @base_color;
                        border-bottom: 1px solid @base_color;
                        border: none;
                        color: white;
                    }
                    >button{
                        float: right;
                        margin-right: 15*@base_size;
                        margin-top: 10*@base_size;
                        font-size: 16*@base_size;
                    }
                }                
                //产品库
                .products{
                    padding-left: 15*@base_size;
                    .lunbo{
                        padding-bottom: 10*@base_size;
                        .swiper-container {
                            width: 100%;
                            height: 400*@base_size;
                            .swiper-slide{
                                width: 100%;
                                height: 100%;
                                img{
                                    width: 100%;
                                }
                                >div{
                                    height: 100%;
                                    background-position: center;
                                }
                            }
                        }
                    }
                    
                    
                    //推荐产品
                    .recommend{
                        
                    }
                    
                }    
                //用户列表
                .lists{
                    padding: 0 15*@base_size 0  15*@base_size ;
                   .one_list{
                       font-size: 16*@base_size;
                       @index_w:30;
                       td{
                           padding: 12*@base_size 8*@base_size;
                           text-align: center;
                           span{
                               display: inline-block;                             
                               line-height: @index_w*@base_size;                      
                           }
                           span.index{                           
                               width: @index_w*@base_size;
                               height: @index_w*@base_size;
                               border: 1px solid @color_line;
                               text-align: center;
                               border-radius: 50%;
                           }
                           .fa-male{                               
                               color: #66a8d8;
                           }
                           .fa-female{
                               color: #ff69c2;
                           }
                       }                       
                   }
                    //列表颜色                    
                    tr:hover{
                        background-color: #d6d6d6;
                    }
                    //没有数据
                    .no_user{
                        font-size: 20*@base_size;
                    }
                }         
            }
            //模块通用样式
            .module{
                .title{
                    color: @base_color;
                    padding-left: 10*@base_size;
                    font-size: 16*@base_size;
                    border-left: 3px solid @base_color;
                    margin-bottom: 10*@base_size;
                }
                //列表
                .list{
                    padding-left: 15*@base_size;
                    padding-bottom: 10*@base_size;
                    li{                                
                        padding: 10*@base_size;
                        border-bottom: 1px solid @color_line;
                        font-size: 16*@base_size;
                        i{
                            float: right;
                            margin-right: 15*@base_size;
                        }
                    }
                    li:first-child{
                        border-top: 1px solid @color_line;
                    }
                    li:hover{
                        background-color: #ececec;
                    }
                }
                //图片集
                .imgs{
                    margin-bottom: 10*@base_size;
                    overflow: hidden;
                    margin-left: -5*@base_size;
                    margin-right: -5*@base_size;
                    .one_img{
                        width: 20%;
                        padding: 10*@base_size 5*@base_size;
                        float: left;
                        >div{
                            width: 100%;
                            height: 150*@base_size;
                            background-color: @color_default;
                            >div:nth-of-type(1){
                                height: 110*@base_size;
                                img{
                                    max-height: 65%;
                                    max-width: 65%;
                                }
                            }
                            >div:nth-of-type(2){
                                height: 40*@base_size;
                                font-size: 16*@base_size;
                                color: @base_color;
                                background-color: #2a2c2b;
                            }
                        }
                    }
                }
            }
            
            //答题内容
            .questions{
                padding-top: 16*@base_size  ;
            }
            
            
            //产品详情列表
            .product_list_detail{  
                >div.module{
                    position: absolute;
                    background-color: white;
                    z-index: 100;
                    width: @right_width*@base_size;
                    min-height: 90vh;
                    top: 120*@base_size;
                    .title{
                        text-align: center;
                        border: none;
                        padding-top: 20*@base_size;
                        font-size: 20*@base_size;
                        button{
                            position: absolute;
                            right: 15*@base_size;
                            top: 10*@base_size;
                        }
                    }     
                    .list{
                        padding-left: 0;
                    }              
                }   
                //遮罩
                .cover{
                    position: fixed;
                    width: 100vw;
                    height: 100vh;
                    left: 0;
                    top: 0;
                    background-color: black;
                    opacity: 0.5;
                    z-index: 20;      
                }
                //lunbo
                .lunbo{
                    .swiper-wrapper{
                        height: 4rem;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
            .question_step{
                width: @right_width*@base_size;
                //步骤条
                padding-top: 130*@base_size;
                .step_bar{
                    position: fixed;
                    top: 100*@base_size;
                    z-index: 19;
                    background-color: white;
                    width: @right_width*@base_size;
                    padding: 20*@base_size 0 40*@base_size 0;
                    >div.step{
                        width: 33.3%;
                        text-align: center;
                      
                        font-size: 18*@base_size;
                        float: left;

                        border-left: none;
                        color: @base_color;
                        img{
                            width: 40px;
                        }
                        .round{
                            position: absolute;
                            left: 50%;
                        }
                    }
                    .col{
                        position: relative;
                        >div{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background-color: white;  
                            box-shadow: 0 0 0 1px black;                          
                            position: absolute;
                            bottom: -30px;
                            transform:translateX(-50%);
                            z-index: 2;
                        }
                        >div:nth-of-type(1){
                            left: 16.5%;
                            
                        }
                        >div:nth-of-type(2){
                            left: 50%
                        }
                        >div:nth-of-type(3){
                            left: 83.5%;
                        }
                        >div.active{
                            box-shadow: none;
                            background-image: url(../../../imgs/intelligent_analysis/right.png);
                            background-size: 100%;
                            background-repeat: no-repeat;
                        }
                        .bar{
                            width: 100%;
                            height: 3px;
                            background-color: lightgray;
                            box-shadow: none;
                            left: 0;
                            bottom:-20px;
                            transform: none;
                            z-index: 1;
                        }
                    }
                }
                >form{
                    min-height: 500*@base_size;
                    width: @right_width*@base_size;
                }
                //问题2
                #question_2{
                    .title{
                        font-size: 16*@base_size;
                    }
                    .content{
                        padding-left: 2em;
                        .checkbox{
                            padding-top: 15*@base_size;
                        }
                    }
                }
            }
            //分析列表
            .analysis_content{
                //表头
                tr{
                    &:hover{
                        background-color: ;
                    }
                    th,td{            
                        padding: 14px 0;
                        padding-left: 5%;
                    }
                    >th{
                        background-color: @base_color;
                        color: white;
                        font-size: 16*@base_size;
                        &:hover{
                            background-color: @base_color;
                        } 
                    }
                     th:nth-of-type(1){
                         width: 33%;
                     }   
                      th:nth-of-type(2){
                         width: 33%;
                     }    
                }
                //返回
                .back{
                    padding: 10*@base_size 0  20*@base_size 0;
                    text-align: center;
                    button{
                        width: auto;
                    }                    
                }
            }
            
        }
    }
    tr:nth-of-type(2n){
        background-color: #ececec;
    }
    .glyphicon-remove,.glyphicon-ok{
       opacity: 0.01;
    }
    #modal_photos{
        max-height: 90%;
        top: 5%;
        .modal-dialog{
            margin: 0 auto;
        }
        .modal-body,.modal-dialog,.swiper-container{
            height: 100%;
            img{
                height: 100%;
            }
        }        
    }
    //引导图
    .modal_photos{
        .swiper-slide{
            width: 600px;
        }
    }
    
}
